<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <el-form ref="formRef" :model="formInfo" inline size="small" label-width="100" class="form_class" :rules="rules">
    <el-form-item label="数据源名称:" prop="dataSourceName">
      <!-- <el-input style="width: calc(100% - 130px);" v-model="formInfo.dataSourceName" clearable placeholder="数据源名称"></el-input> -->
      <el-select style="width: calc(100% - 130px);" v-model="formInfo.dataSourceName" clearable placeholder="数据源名称" @change="changeDataSourceName($event, 1)">
        <el-option v-for="item in sources" :key="item.id" :label="item.dataSourceName" :value="item.dataSourceName"></el-option>
      </el-select>
      <el-button style="width: 120px; margin-left: 10px;" size="small" @click="addDataSource">新增数据源</el-button>
    </el-form-item>
    <el-form-item label="数据路径:" prop="c">
      <el-input style="width: 100%;" v-model="formInfo.dataPath" clearable placeholder="数据路径"></el-input>
    </el-form-item>
    <el-form-item label="库名:" prop="databaseName">
      <!-- <el-input style="width: 100%;" v-model="formInfo.databaseName" clearable placeholder="库名"></el-input> -->
      <el-select style="width: 100%;" v-model="formInfo.databaseName" filterable clearable placeholder="库名" @change="changeDataSourceName($event, 2)">
        <el-option v-for="item in databaseList" :key="item.databaseName" :label="item.databaseName" :value="item.databaseName"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="表名:" prop="tableName">
      <!-- <el-input style="width: 100%;" v-model="formInfo.tableName" clearable placeholder="表名"></el-input> -->
      <el-select style="width: 100%;" v-model="formInfo.tableName" clearable filterable placeholder="表名" @change="changeDataSourceName($event, 3)">
        <el-option v-for="item in tableList" :key="item.tableName" :label="item.tableName" :value="item.tableName"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="分割符:" prop="delimiter">
      <el-select style="width: 100%;" v-model="formInfo.delimiter" clearable placeholder="分割符">
        <el-option v-for="item in seperateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="编码:" prop="encoding">
      <el-select style="width: 100%;" v-model="formInfo.encoding" clearable placeholder="编码">
        <el-option v-for="(val, key) in props.encodingDicts" :key="key" :label="val" :value="key"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="忽略表头:" prop="ignoreHeader">
      <el-radio-group v-model="formInfo.ignoreHeader">
        <el-radio :value="1" size="small">是</el-radio>
        <el-radio :value="2" size="small">否</el-radio>  
      </el-radio-group>
    </el-form-item>
    <template v-if="taskType == 'ra_mysql'">
      <!-- RestApi导入Mysql -->
      <el-form-item label="是否分页:" prop="isPagination">
        <el-radio-group v-model="formInfo.isPagination">
          <el-radio value="1" size="small">是</el-radio>
          <el-radio value="2" size="small">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="结果参数名称:" prop="resultParamName">
        <el-input style="width: 100%;" v-model="formInfo.resultParamName" clearable placeholder="结果参数名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left: 100px; " size="small" type="primary" @click="testLink">测试链接</el-button>
      </el-form-item>
    </template>
    <template v-if="taskType == 'doris_es' || taskType == 'mysql_es'">
      <!-- Doris导入ES / Mysql导入ES -->
      <el-form-item label="源数据库:" prop="sourceLibrary">
        <el-input style="width: 100%;" v-model="formInfo.sourceLibrary" clearable placeholder="源数据库"></el-input>
      </el-form-item>
      <el-form-item label="源数据表:" prop="sourceTable">
        <el-input style="width: 100%;" v-model="formInfo.sourceTable" clearable placeholder="源数据表"></el-input>
      </el-form-item>
    </template> 
    <template v-if="taskType == 'mongo_mongo' || taskType == 'doris_mysql' || taskType == 'mysql_doris' || taskType == 'mysql_mysql' || taskType == 'oracle_doris' || taskType == 'oracle_mysql'">
      <!-- Doris导入Mysql / Mysql导入Doris / Mysql导入Mysql / Oracle导入Doris / Oracle导入Mysql -->
      <!-- <el-form-item label="查询语句:" prop="searchSql">
        <el-input style="width: 100%;" v-model="formInfo.searchSql" :rows="3" type="textarea" clearable placeholder="查询语句"></el-input>
      </el-form-item> -->
      
    </template>
    <template v-if="taskType == 'ftp_neo4j'">
      <!-- FTP导入Neo4j -->
      <el-form-item label="数据路径:" prop="dataPath">
        <!-- <el-select style="width: 100%;" v-model="formInfo.dataPath" clearable placeholder="数据路径">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select> -->
        <el-input style="width: 100%;" v-model="formInfo.dataPath" clearable placeholder="数据路径"></el-input>
      </el-form-item>
      <el-form-item label="分割符:" prop="delimiter">
        <el-select style="width: 100%;" v-model="formInfo.delimiter" clearable placeholder="分割符">
          <el-option v-for="item in seperateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="编码:" prop="encoding">
        <el-select style="width: 100%;" v-model="formInfo.encoding" clearable placeholder="编码">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="忽略表头:" prop="ignoreHeader">
        <el-radio-group v-model="formInfo.ignoreHeader">
          <el-radio value="1" size="small">是</el-radio>
          <el-radio value="2" size="small">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </template>
  </el-form>
  <AddScource v-if="addVisible" :addVisible="addVisible" @handleEvent="handleEvent" type="add" />
</template>
        
<script name="TaskSourceConfig" setup>
import AddScource from '../../dataSource/component/AddScource.vue';
import { getDataSourceList } from '@/api/dataIntegration/dataSource/index';
import { getTableStructure } from '@/api/dataIntegration/dataSync/index';
const props = defineProps(['taskType', 'formInfo', 'encodingDicts']);
const emits = defineEmits(['handleEvent']);
const formRef = ref();
const addVisible = ref(false);
const sources = ref([]);
const databaseList = ref([]);
const tableList = ref([]);
const formInfo = ref({
  dataSourceName: '',
  // isPagination: '',
  // resultParamName: '',
  // sourceLibrary: '',
  // sourceTable: '',
  searchSql: '',
  dataPath: '',
  databaseName: '',
  tableName: '',
  delimiter: '',
  encoding: 'utf-8',
  ignoreHeader: ''
})
const taskType = ref('');
const sourceInfo = ref({});
const seperateOptions = ref([
  {
    label: '逗号',
    value: 'comma'
  },
  {
    label: '分号',
    value: 'semicolon'
  },
  {
    label: '空格',
    value: 'space'
  }
])
const rules = reactive({
  dataSourceName: [
    { required: true, message: '请选择数据源名称', trigger: 'blur' },
  ],
  isPagination: [
    { required: true, message: '请选择是否分页', trigger: 'blur' },
  ],
  databaseName: [
    { required: true, message: '请选择源库名', trigger: 'blur' },
  ],
  tableName: [
    { required: true, message: '请选择源表名', trigger: 'blur' },
  ],
  searchSql: [
    { required: true, message: '请输入查询语句', trigger: 'blur' },
  ],
  dataPath: [
    { required: true, message: '请选择数据路径', trigger: 'blur' },
  ],
  delimiter: [
    { required: true, message: '请选择分割符', trigger: 'blur' },
  ],
  ignoreHeader: [
    { required: true, message: '请选择是否忽略表头', trigger: 'blur' },
  ],
})
const addDataSource = () => {
  addVisible.value = true;
}
const changeDataSourceName = (val, type) => {
  if (type == 1) {
    sources.value.forEach(item => {
      if(item.dataSourceName === val){
        sourceInfo.value = item;
      }
    });
    formInfo.value.dataPath = sourceInfo.value?.url;
    formInfo.value.databaseName = '';
    formInfo.value.tableName = '';
    databaseList.value = [];
    tableList.value = [];
    getTableStructureInfo(1);
  } else if (type == 2) {
    formInfo.value.tableName = '';
    tableList.value = [];
    getTableStructureInfo(2);
  } else if (type == 3) { 
    getTableStructureInfo(3);
  }
}
// 查询数据库结构信息
const getTableStructureInfo = (type, init=false) => {
  getTableStructure({
    url: sourceInfo.value.url,
    userName: sourceInfo.value.userName,
    secretCode: sourceInfo.value.secretCode,    
    databaseName: type == 2 || type == 3 ? formInfo.value.databaseName : null,
    tableName: type == 3 ? formInfo.value.tableName : null
  }).then((res) => {    
    if (res) {
      if (type == 1) {
        databaseList.value = res.data;
      } else if (type == 2) {
        tableList.value = res.data;
      } else if (type == 3) {
        emits('handleEvent', {data: res.data, init});
      }
    }
  });         
}
// 测试链接
const testLink = () => {};
const handleEvent = (data) => {
  addVisible.value = false;
  if(data?.type === 'refresh'){
    // 数据源信息同步
    // doQuery();
    getDataSourceListInfo();
    sourceInfo.value = data.row;
    formInfo.value.dataSourceName = data.row.name;
    formInfo.value.dataPath = data.row?.url;
    addVisible.value = false;
  }
};
// 查询数据源列表信息
const getDataSourceListInfo = async () => {
  await getDataSourceList({ pageSize: 1000, pageNum: 1 }).then((res) => {
    if (res) {
      sources.value = res?.rows;
    }
  });
}
// 编辑or详情 数据初始化
const initData = () => {
  sources.value.forEach(item => {
    if(item.dataSourceName === formInfo.value.dataSourceName){
      sourceInfo.value = item;
    }
  });
  getTableStructureInfo(1);
  getTableStructureInfo(2);
  getTableStructureInfo(3, true);
}
onMounted(async () => {
  await getDataSourceListInfo();
  if (props.formInfo) {
    formInfo.value = props.formInfo;
    initData();
  }
});
defineExpose({
  taskType,
  formInfo,
  formRef
});
</script>
<style scoped lang="scss">
:deep(.asterisk-left) {
  width: 100%;
}
</style>
